<template>
	<view class="container">
		<view class="title">院校标签</view>
		<view class="list-box">
			<view class="list-item-box" v-for="(item,index) in dataList" :key="item.userLabelId">
				<view class="list-item">
					<view class="item-label">{{item.labelName}}</view>
					<view class="item-del" @tap="showMask(item.userLabelId, index)">
						<image src="../../static/images/del.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="no-trends-box" v-if="isEmpty">
			<view class="no-trends-img">
				<image src="../../static/images/no_data.png"></image>
			</view>
			<view class="no-trends-label">暂无数据</view>
		</view>
		<view class="create-label" @tap="goSelectLabel">添加标签</view>
		<view class="mask" v-show="isShowMask"></view>
		<view class="mask-box" v-show="isShowMask">
			<view class="mask-content-box">
				<view class="mask-content-title">确定要删除这个标签吗？</view>
				<view class="mask-btn-box">
					<view class="mask-btn btn-cancel" @tap="hideMask">取消</view>
					<view class="mask-btn btn-confirm" @tap="delLabel">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { http, showToastMsg } from '../../utils'
	
	export default {
		data() {
			return {
				isShowMask: false,
				dataList: [],
				delId: 0,
				delIndex: -1,
				labelNum: 0,
				isEmpty: false
			}
		},
		
		onLoad() {
			this.fetchData()
		},
		
		methods: {
			
			fetchData() {
				const that = this
				http('/label/list').then(res => {
					if (res.code == 20000) {
						if (res.data.length > 0) {
							that.dataList = res.data
						} else {
							that.isEmpty = true
						}
					} else {
						that.isEmpty = true
					}
				})
			},
			
			goSelectLabel() {
				const that = this
				if (that.dataList.length >= 5) {
					return showToastMsg('最多添加5个标签')
				}
				that.labelNum = that.dataList.length
				uni.navigateTo({
					url: '/pages/select_label/select_label?t=1&n=' + that.labelNum
				})
			},
			
			showMask(id, index) {
				this.delId = id
				this.delIndex = index
				this.isShowMask = true
			},
			
			hideMask() {
				this.delId = 0
				this.delIndex = -1
				this.isShowMask = false
			},
			
			delLabel() {
				const that = this
				http('/label/del', {id: that.delId}).then(res => {
					if (res.code == 20000) {
						that.dataList.splice(that.delIndex, 1)
						that.hideMask()
					}
				})
			}
			
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f9;
	}
	
	.no-trends-box {
		width: 750rpx;
		height: auto;
		margin-top: 160rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 200rpx;
	}
	
	.no-trends-img image {
		width: 300rpx;
		height: 300rpx;
	}
	
	.no-trends-label {
		font-size: 36rpx;
		color: #666666;
		margin-top: 10rpx;
	}
	
	.container {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.title {
		width: 640rpx;
		color: #333333;
		font-size: 60rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin-top: 30rpx;
	}
	
	.list-box {
		width: 750rpx;
		background-color: #ffffff;
		margin-top: 30rpx;
	}
	
	.list-item-box {
		width: 100%;
		height: 138rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-bottom: 2rpx solid #f5f5f5;
	}
	
	.list-item {
		width: 640rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.item-label {
		color: #45d6b7;
		font-size: 45rpx;
	}
	
	.item-del image {
		width: 32rpx;
		height: 34rpx;
	}
	
	.create-label {
		width: 556rpx;
		height: 92rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		color: #ffffff;
		background-color: #45d6b7;
		border-radius: 46rpx;
		margin-top: 100rpx;
	}
	
	.mask {
		width: 750rpx;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		background-color: #000000;
		opacity: 0.5;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.mask-box {
		width: 750rpx;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.mask-content-box {
		width: 626rpx;
		height: 360rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 20rpx;
	}
	
	.mask-content-title {
		color: #333333;
		font-size: 36rpx;
		margin-top: 98rpx;
		border-radius: 20rpx;
	}
	
	.mask-btn-box {
		margin-top: 62rpx;
		width: 456rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.mask-btn {
		width: 200rpx;
		height: 70rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 36rpx;
	}
	
	.btn-cancel {
		background-color: #f3f2f0;
		color: #333333;
	}
	
	.btn-confirm {
		background-color: #45d6b7;
		color: #ffffff;
	}
</style>
